<%--
  Created by IntelliJ IDEA.
  User: CrazyTobis
  Date: 2020-05-20
  Time: 8:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    <form data-tcj = "repertory-form">
        <div class="row">

        <div class="col-2">
            <input name="goodsName" class="form-control" placeholder="请输入物品品名">
        </div>
        <div class="col-2">
            <input class="form-control" name="goodsId" placeholder="请输入物品ID">
        </div>
        <div class="col-2">
            <select data-tcj="repertory-warehouse" class="form-control" name="warehouseId">
                <option  selected hidden value="">请选择仓库</option>
            </select>
        </div>
        <div class="col-2">
            <select data-tcj="repertory-shelves" class="form-control" name="shelvesId">
                <option selected hidden  value="">请选择货架</option>
            </select>
        </div>
        <div class="col-2 offset-1">
            <button data-tcj="select-kucun" class="btn btn-outline-primary mr-4" style="padding: 5px 20px">查询</button>
            <button type="reset" class="btn btn-outline-danger"><i class="ft-rotate-cw mr-1" style="font-size: 15px; vertical-align: middle"></i>重置</button>
        </div>

        </div>
        <div class="row ">
            <div class="col-2">

                <input name="min" class="form-control"placeholder="请输入最小库存量">
            </div>
            <span class="col-form-label">至</span>
            <div class="col-2">
                <input name="max" class="form-control" placeholder="最大库存量">
            </div>



        </div>
    </form>
    <div data-tcj="repertory-table"></div>

<script src="${pageContext.request.contextPath}/app-assets/js/popover.js" type="text/javascript"></script>
<script>
    (function () {

        $(function () {
            $('body [data-toggle="popover"]').popover()
        })
        $.addGDD("tcj-fun",function (data) {


            // 循环遍历所有的订单数据
            for (let i = 0; i < data.data.length; i++) {
                let tempData = data.data[i];

                // 创建一个用来拼接隐藏显示内容的变量
                let str = "";

                // 如果商品名称的数量大于 1 则拼接隐藏 ... 的样式
                if(data.data[i].warehouse && data.data[i].warehouse.length > 1){
                    // 取出所有名字的数组
                    let names = tempData.warehouse;

                    // 如果长度大于了 5
                    if(names.length > 5){

                        for (let j = 0; j < 5; j++) {
                            let name = names[j];
                            str += "<p>"+name+"</p>";
                        }

                        // 如果数量大于了 5 则最后凭借一个省略号 ...
                        str += '<p>......</p>';
                        // str +=
                    }else{
                        // 如果数量符合 <= 5 则直接遍历
                        for (let name of names) {
                            str += "<p>"+name+"</p>";
                        }
                    }

                    // 组装显示的内容
                    tempData['tradeName'] = "<a data-xhq='cgdd-wp' href=\"#\" data-toggle=\"popover\"\n" +
                        "            data-original-title=\"\"\n" +
                        "            data-content= \" "+ str +" \" \n" +
                        "            data-trigger=\"hover\"\n" +
                        "           data-html=\"true\">\n" +
                        "       <font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">\n" +
                        "        <span class=\"fa fa-ellipsis-h\"></span>\n" +
                        "    </font></font>\n" +
                        "    </a>";


                }else{
                    if(tempData.warehouse.length = 1){
                        // 直接将唯一的一个拼接上去
                        tempData.tradeName = tempData.warehouse[0];
                    }else{
                        // 虽然采购订单没有空物品的情况也做个判断
                        tempData.tradeName = 'null';
                    }
                }
            };

            return data;
        })






        //ajax查询仓库并且动态添加
        $.get('wareHouse',{'type':"仓库"},function (e) {
            //获取到仓库的selec
            for(let o of e){
                let option =  document.createElement("option");

                option.value = o.id;
                $(option).text(o.name);

                $('[data-tcj="repertory-warehouse"]').append(option);
            }
        },"json");
        //监听仓库的点击事件
        $('[data-tcj="repertory-warehouse"]').on('click',function () {
            let type =  this.value;
            if(type.trim() == ""){

            }else{
                //通过选择的仓库查询到该仓库的货架
                $.get('wareHouse',{"type":"货架","id":type},function (e) {
                    //先清空之前的option
                    $('[data-tcj="repertory-shelves" ]').find('option').each(function (index,ele) {
                        if(index == 0){
                            return
                        }else {
                            $(ele).remove();
                        }
                    })
                    //循环将货架的信息拼接上去
                    for (let o of e){
                        //创建一个option的节点
                        let option =  document.createElement("option");
                        //将查询出来的值赋进去
                        $(option).text(o.name);
                        option.value = o.id;
                        //将创建好的option放到对应的select中
                        $('[data-tcj="repertory-shelves" ]').append(option);
                    }
                },'json');
            }
        });
        //监听查询按钮
        $('[data-tcj="select-kucun"]').on('click',function (e) {

            e.preventDefault();
            //获取到form表单并序列化
            let form = $('[data-tcj = "repertory-form"]').serialize();

            //ajax请求
            $.post('repertory.html',form,function (e) {

                   let cloumns = [{field: "lastDate", title: "最近更新时间"},
                       {field: "id", title: "物品ID"},
                       {field: "goodsName", title: "物品品名"},

                       {field: "gys", title: "供应商"},
                       {field: "unit", title: "计量单位"},
                       {field: "tradeName", title: "所属仓库"},
                       {field: "availableStock", title: "可用库存"},
                       {field: "breakNum", title: "损坏数"}];

                      let pageVo =   $.getGDD("tcj-fun")(e.data);

                        console.log(pageVo)
                        let options = {
                            pageVO:pageVo,
                            isEdit:true,
                            columns:cloumns,
                            node:'[ data-tcj="repertory-table"]',
                            fontAwesome:{'ft-menu':"详情"},
                            fontAwesomeClick:{"详情":function (event,obj,tr,parent,datas) {
                                 //找到对应的数据并传入到servlet让下个页面复用

                                    for (let o of datas){
                                        if(o.id == obj.id ){
                                            obj = o;
                                            break;
                                        }
                                    }
                                        $('').addMianbao('lastDetail',"库存信息详情",{"datas":JSON.stringify(obj)});

                                }},
                            clickPageBefore:function (options,e) {
                                let pageVo =  $.getGDD('tcj-fun')(e.data);

                                console.log(pageVo);
                                options.pageVO = pageVo;

                                return options;
                            },
                            clickPage: function () {
                                $('[data-toggle="popover"]').popover();
                            }
                        }
                        firstTable(options)
                $('[data-toggle="popover"]').popover();
            },'json')
        });
        $('[data-tcj="select-kucun"]').trigger('click');

    })();



</script>